<template>
  <h3>控件属性</h3>
  <div v-if="selectedControl">
    <el-form :model="selectedControl.properties" label-width="80px" size="small">
      <el-form-item label="ID">
        <el-input :value="selectedControl.id" disabled></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-input :value="selectedControl.type" disabled></el-input>
      </el-form-item>
      <el-form-item label="页码">
        <el-input-number v-model="selectedControl.page" :min="1"></el-input-number>
      </el-form-item>
      <el-form-item label="X坐标">
        <el-input-number v-model="selectedControl.x" :precision="2"></el-input-number>
      </el-form-item>
      <el-form-item label="Y坐标">
        <el-input-number v-model="selectedControl.y" :precision="2"></el-input-number>
      </el-form-item>
      <el-form-item label="宽度">
        <el-input-number v-model="selectedControl.width" :min="10"></el-input-number>
      </el-form-item>
      <el-form-item label="高度">
        <el-input-number v-model="selectedControl.height" :min="10"></el-input-number>
      </el-form-item>

      <el-divider>通用属性</el-divider>
      <el-form-item label="标签">
        <el-input v-model="selectedControl.properties.label" @input="updateProp('label', $event)"></el-input>
      </el-form-item>
      <el-form-item label="必填">
        <el-switch v-model="selectedControl.properties.required" @change="updateProp('required', $event)"></el-switch>
      </el-form-item>

      <template v-if="selectedControl.type === 'text-input'">
        <el-divider>文本属性</el-divider>
        <el-form-item label="占位符">
          <el-input v-model="selectedControl.properties.placeholder" @input="updateProp('placeholder', $event)"></el-input>
        </el-form-item>
      </template>

      <template v-else-if="selectedControl.type === 'signature'">
        <el-divider>签名属性</el-divider>
        <el-form-item label="签名类型">
            <el-select v-model="selectedControl.properties.signatureType" @change="updateProp('signatureType', $event)">
                <el-option label="手写" value="draw"></el-option>
                <el-option label="文本" value="text"></el-option>
                <el-option label="上传" value="upload"></el-option>
            </el-select>
        </el-form-item>
      </template>

      <template v-else-if="selectedControl.type === 'checkbox'">
        <el-divider>复选框属性</el-divider>
        <el-form-item label="默认选中">
          <el-switch v-model="selectedControl.properties.checked" @change="updateProp('checked', $event)"></el-switch>
        </el-form-item>
      </template>

      <template v-else-if="selectedControl.type === 'date-picker'">
        <el-divider>日期属性</el-divider>
        <el-form-item label="日期格式">
          <el-input v-model="selectedControl.properties.dateFormat" @input="updateProp('dateFormat', $event)"></el-input>
        </el-form-item>
      </template>
    </el-form>
  </div>
  <div v-else class="no-selection-placeholder">
    <p>请在PDF页面上选择一个控件。</p>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  selectedControl: Object,
});

const emit = defineEmits(['update-control-properties']);

const updateProp = (key, value) => {
  const updatedProps = { ...props.selectedControl.properties, [key]: value };
  emit('update-control-properties', updatedProps);
};
</script>

<style scoped>
h3 {
  margin-top: 0;
  margin-bottom: 20px;
  text-align: center;
}
.no-selection-placeholder {
  text-align: center;
  color: #909399;
  margin-top: 50px;
}
</style>